<template>
	<view class="cartbox">
		<tab></tab>
		<view class="tickbox">
			<view class="tickTest">
				<u-icon name="checkmark-circle-fill" color="#8b0000"></u-icon>
				<view>30天无忧退货</view>
			</view>
			<view class="tickTest">
				<u-icon name="checkmark-circle-fill" color="#8b0000"></u-icon>
				<view>48小时快速退费</view>
			</view>
			<view class="tickTest">
				<u-icon name="checkmark-circle-fill" color="#8b0000"></u-icon>
				<view>满88元免邮费</view>
			</view>
		</view>

		<view class="cartGoodsBox">
			<view class="cartGood" v-for="(item,index) in cartList">
				<view class="cartGoodsLittleBox">
					<!-- <u-checkbox-group v-model="checked" placement="column" @change="checkboxChange"></u-checkbox-group> -->
					<img :src="item.list_pic_url" alt="" mode="widthFix">
					<view class="goodTitle">
						<view class="GooDtitle1">{{ item.goods_name }}</view>
						<view class="GooDtitle2">￥{{ item.retail_price }}元</view>
					</view>
					<u-number-box :disabled="disabled" button-size="36px" class="Stepper" v-model="value"
						@change="valChange"></u-number-box>
					<!-- <u-button class="delete" type="primary" shape="circle" text="删除商品"></u-button> -->
				</view>
				<view class="pos">
					<view class="total_txt">
						累计共{{ item.number }}件商品，可点击
						<text @tap="Modify">编辑</text>
						按钮进行商品数量修改
					</view>
					<view class="total">
						<label class="radio">
							<radio value="r1" :checked="true" />{{qxwz}}
							<!-- 全选 -->
						</label>
						<view class="right">
							<text class="all">合计:</text>
							<text class="price">￥{{ total }}</text>
							<u-button type="error" shape="circle" size="medium" class="custom-style">立即购买</u-button>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import tab from '@/custom-tab-bar/index.vue';
	import {
		mapMutations
	} from 'vuex';
	import {
		ShoppingCartGoods
	} from '../../utils/api.js';
	export default {
		data() {
			return {
				cartList: [],
				value: 0,
				disabled: true,
				total: 0,
				qxwz: "全选",
				qxk: true,

			};
		},

		components: {
			tab
		},
		computed: {

		},
		onShow() {},
		async onShow() {
			this.changevalue(3);
			let res1 = uni.getStorageSync('X-Nideshop-Token')
			console.log(res1);
			let res = await ShoppingCartGoods(res1)
			console.log(res);
			let {
				cartList,
				cartTotal
			} = res.data;
			this.cartList = cartList;
			this.cartTotal = cartTotal;
			this.total = cartTotal.goodsAmount
			console.log(cartTotal.goodsAmount);
			console.log("cartList", this.cartList)
		},
		methods: {
			...mapMutations(['changevalue']),
			valChange(e) {
				console.log('当前值为: ' + e.value)
				console.log(1);
			},
			checkboxChange(n) {
				console.log('change', n);
			},
			Modify() {
				console.log(this.disabled);
				if (this.disabled) {
					this.disabled = false
				} else {
					this.disabled = true
				}

			}
		}
	};
</script>

<style lang='less'>
	.cartbox {
		background-color: #efefef;
	}

	.tickbox {
		display: flex;
		font-size: 20rpx;
		justify-content: space-around;

		.tickTest {
			display: flex;
		}
	}

	.cartGoodsBox {
		background-color: #fff;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		/* 	width: 1340rpx;
		height: 320rpx; */

		.cartGood {
			/* 	background-color: #fff; */
			width: 1200rpx;
			height: 140px;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.cartGoodsLittleBox {
				/* position: relative; */
				display: flex;
				align-items: center;
				background-color: #efefef;
				width: 90%;
				padding-right: 10rpx;
				height: 200rpx;

				.delete {
					/* width: 75px;
					height: 24px;
					position: absolute;
					top: 100px;
					left: 258px; */
				}

				.goodTitle {
					display: flex;
					flex-wrap: wrap;
					height: 60%;
					align-content: space-between;

					.GooDtitle1 {
						font-size: 24rpx
					}

					.GooDtitle2 {
						font-size: 20rpx
					}
				}
			}

			img {
				/* position: absolute;
				top: 10px;
				left: 5px; */
				width: 100px;
				height: 100px;
				/* background-color: #efefef; */
			}




			.Stepper {
				/* position: absolute;
				top: 60px;
				left: 240px; */

			}
		}
	}

	.total_txt {
		background-color: #fff7cc;
		height: 120rpx;
		font-size: 30rpx;
		color: #f56723;
		display: flex;
		align-items: center;
		justify-content: center;

		text {
			background-color: #07c160;
			color: #fff;
			width: 84rpx;
			text-align: center;
			height: 64rpx;
			line-height: 64rpx;
			display: inline-block;
			margin: 0 10rpx;
		}
	}

	.pos {
		position: fixed;
		width: 100%;
		bottom: 118rpx;
	}

	.total {
		width: 100%;
		display: flex;
		align-items: center;
		background-color: #fff;
		padding: 20rpx;
		justify-content: space-between;
		font-size: 32rpx;
		box-sizing: border-box;

		.right {
			display: flex;
			align-items: center;

			.all {
				width: 148rpx;
				font-size: 32rpx;
			}

			.price {
				color: #ee0a24;
				font-size: 40rpx;
				margin-right: 20rpx !important;
			}

			.custom-style {
				background-color: #f01426;
				width: 230rpx;
				height: 92rpx;
				font-size: 32rpx;
			}
		}
	}
</style>
